<template>
  <div class="goodsDetail">
    <div class="flex_align">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('员工编号') }}：</span>
        <el-input v-model="formInfo.Account" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('姓名') }}：</span>
        <el-input v-model="formInfo.OPName" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('单类名称') }}：</span>
        <el-input v-model="formInfo.UnitName" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('基层单位名称') }}：</span>
        <el-input v-model="formInfo.BaseUnitName" class="w164" />
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('岗位') }}：</span>
        <el-input v-model="formInfo.PostName" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('岗位持证需要') }}：</span>
        <el-input v-model="formInfo.PostCard" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('身份证号码') }}：</span>
        <el-input v-model="formInfo.IDCard" class="w164" />
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('文化程度') }}：</span>
        <el-input v-model="formInfo.EduLevel" class="w164" />
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('是否持证') }}：</span>
        <el-radio v-model="form.IsCard" label="是">是</el-radio>
        <el-radio v-model="form.IsCard" label="否">否</el-radio>
      </div>
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('性别') }}：</span>
        <el-radio v-model="form.Gender" label="男">男</el-radio>
        <el-radio v-model="form.Gender" label="女">女</el-radio>
      </div>
    </div>
    <div class="flex_align mt20">
      <div class="mr20">
        <span class="color_494949 ft12 pr5">{{ translate('作业人员图像') }}：</span>
        <el-upload
          class="avatar-uploader"
          list-type="picture-card"
          name="fileInput"
          :action="action"
          :headers="headers"
          :show-file-list="false"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :on-remove="handleRemove">
          <!-- <el-icon class="el-icon-plus"></el-icon> -->
          <el-image v-if="form.HeadImageUrl" :src="form.HeadImageUrl" class="avatar"/>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
  import { translate } from '@/i18n'
  import { baseURL } from '@/config'
  import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()
  const { token, accountInfo } = useUserStore()
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    emits: [],
    data() {
      return {
        formInfo: this.form,
        imageUrl: this.form.HeadImageUrl,
        action: '',
        headers: '',
      }
    },
    watch: {
      form(val) {
        this.formInfo = val
        if(!this.formInfo.uniqueCode) {
          this.formInfo.uniqueCode = this.getRandom()
        }
        this.headers = this.headers = {
          Authorization: `Bearer ${token}`,
        }
        this.action = `${baseURL}/WF_Document/UploadFile?FormId=${this.formInfo.uniqueCode}`
      },
    },
    created() {
      if(!this.formInfo.uniqueCode) {
          this.formInfo.uniqueCode = this.getRandom()
        }
        this.headers = this.headers = {
          Authorization: `Bearer ${token}`,
        }
        this.action = `${baseURL}/WF_Document/UploadFile?FormId=${this.formInfo.uniqueCode}`
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      S4(){
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
      },
      getRandom(){
        return `${this.S4() + this.S4()}-${this.S4()}-${this.S4()}-${this.S4()}-${this.S4()}${this.S4()}${this.S4()}`
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
        this.formInfo.HeadImageUrl = ''
      },
      beforeUpload(file, fileList) {
        const fileTypeName = file.name.substring(
          file.name.lastIndexOf('.') * 1 + 1 * 1
        ) // 获取后缀名
        const supportFormat = [
          'jpg',
          'png',
          'gif',
          'JPEG',
          'PNG',
          'GIF',
          'JPG',
          'jpeg',
        ]
        const isLt2M = file.size / 1024 / 1024 < 2
        const index = supportFormat.indexOf(fileTypeName)
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
          return false
        }
        if (index == -1) {
          // 说明核实不符合
          this.$message.warning('上传文件的格式不合符，请重新上传！')
          return false
        }
        return true
      },
      handleSuccess(file, fileList) {
        console.log(file, fileList)
        if (file.code != '200') {
          this.$message.warning(file.message)
        } else {
          this.formInfo.HeadImageUrl = file.data
          console.log(this.imageUrl)
          this.$message.success('上传成功')
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    height: 600px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .mr20 {
    margin-right: 20px;
  }

  .w164 {
    width: 164px !important;
  }
  .inline-block {
    display: inline-block;

  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .w320 {
    width: 433px;
  }
  .color_494949 {
    width: 130px;
    display: inline-block;
    text-align: right;
  }
  .avatar-uploader {
    display: inline-block;
  }
  .goodsDetail2 {
    min-height: 300px;
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail2 {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .main_active {
    display: inline-block;
    width: 120px;
    text-align: right;
  }
  .mr20 {
    margin-right: 20px;
  }

  .w400 {
    width: 400px !important;
  }
  .mt20 {
    margin-top: 10px;
  }
  .mr10 {
    margin-right: 10px;
  }
  ::v-deep input[type='number']::-webkit-inner-spin-button,
  ::v-deep input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view {
    white-space: nowrap;
    display: inline-block;
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }
</style>
